<template>
  <view class="warp">
    <view class="search">
      <view class="store" v-if="flag == 'szhkey'">
        <img src="../../static/icons/logo.png" class="logo" alt="" />
      </view>
      <view class="store" v-if="flag == 'ysmkey'">
        <img src="../../static/icons/logo1.png" class="logo" alt="" />
      </view>
      <u-search
        bgColor="#eeeeee"
        borderColor="#eee"
        @change="Selectkeyword"
        placeholder="请输入关键词"
        :showAction="searchtext"
        v-model="keyword"
      ></u-search>
    </view>

    <scroll-view
      :scroll-top="scrollTop"
      scroll-y="true"
      class="scroll-Y"
      @scrolltoupper="upper"
      @scrolltolower="lower"
      @scroll="scroll"
    >
      <view class="content">
        <swiper
          class="swiper"
          circular
          :indicator-dots="false"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
        >
          <swiper-item v-for="(item, k) in swiperList" :key="k">
            <image
              style="width: 100%; height: 100%"
              :src="item.img"
              @click="swiperOnclick(item.path)"
            ></image>
          </swiper-item>
        </swiper>
        <!-- 好表推荐 -->
        <view class="hireSellcolumn">
          <view class="column-top">
            <view class="place">热门类目</view>
          </view>
          <view class="brank">
            <view class="box">
              <view
                class="item"
                v-for="item in brandlist"
                :key="item.id"
                @click="toproindex(item.id)"
              >
                <view class="thumb">
                  <u-image
                    :lazy-load="true"
                    :showLoading="true"
                    :src="item.thumb_text"
                    width="45px"
                    height="45px"
                  >
                    <template v-slot:loading>
                      <u-loading-icon color="red"></u-loading-icon> 
                    </template>
                  </u-image>
                </view>
                <view class="text">{{ item.name }}</view>
              </view>
              <view class="item" @click="tomorebrank">
                <view class="thumb">
                  <view class="morebrank">
                    <span class="icon">
                      <u-icon
                        name="grid-fill"
                        color="#888888"
                        size="38"
                      ></u-icon
                    ></span>

                    <view class="text1">更多类目</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="sellcolumn">
          <view class="column-top">
            <view class="place">推荐游玩</view>
            <view style="font-size:13px;color:#888888;margin-right:10px">点击前往 > </view>
          </view>
          <!-- 名表推荐 -->
          <view class="column-content">
            <scroll-view
              class="scroll-view_H"
              scroll-x="true"
              @scroll="scroll"
              scroll-left="120"
            >
              <navigator
                class="scroll-view-item_H"
                v-for="item in sellcolumnList"
                :key="item.id"
                @click="toinfo(item.id)"
              >
                <view class="content-img">
                  <image
                    :lazy-load="true"
                    :src="item.image_text"
                    mode=""
                  ></image>
                </view>
                <view class="content-name">
                  {{ item.name }}
                </view>
                <view class="content-price"> {{ item.price }} </view>
              </navigator>
            </scroll-view>
          </view>
        </view>

        <swiper
          class="swiper1"
          circular
          :indicator-dots="indicatorDots"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
        >
          <swiper-item v-for="(item, k) in indexpiclist" :key="k">
            <image
              style="width: 100%; height: 100%"
              :src="item.url"
              @click="
                gotoDetail({ path: item.path, id: item.id, soure: item.soure })
              "
            ></image>
            <view class="swipertitle">{{ item.title }}</view>
          </swiper-item>
        </swiper>

        <view class="place">好表推荐</view>
        <!-- 商品列表 -->
        <view class="goods-list">
          <view class="product-list">
            <view
              class="product"
              v-for="item in prolist"
              :key="item.id"
              @click="toinfo(item.id)"
            >
              <view class="thumb">
                <u-image
                  :showLoading="true"
                  :lazy-load="true"
                  :src="item.thumbs_text[0]"
                  width="165px"
                  height="165px"
                >
                  <template v-slot:loading>
                    <u-loading-icon color="red"></u-loading-icon>
                  </template>
                </u-image>
              </view>
              <view class="name">{{
                item.brankname_text + item.btypename_text + item.code
              }}</view>
              <view class="info">
                <view class="price">{{ item.price }}</view>
                <view class="slogan">热度:{{ item.heat }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="" style="height: 150rpx"> </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: "",
      keyword: "",
      prolist: [],
      src: "https://cdn.uviewui.com/uview/album/1.jpg",

      loadingshow: false,
      list: [],
      searchtext: false,
      flag: "",

      background: {
        backgroundColor: "#9acafc",
      },
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      keyword: "",
      offsetTop: 0,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      sellcolumnTabslist: [
        {
          name: "名表推荐",
        },
      ],
      sellcolumnhirelist: [
        {
          name: "好表推荐",
        },
      ],
      topTabscurrent: 0,
      sellcolumnTabscurrent: 0,
      sellcolumnhirecurrent: 0,
      brandlist: [],

      flowList: [],
      sellcolumnList: [],
      hirelist: [],
      swiperList: [],
      indexpiclist: [],
      serverSwiper: [],
    };
  },
  onLaunch() {
    this.flag = uni.getStorageSync("flag");
  },

  onLoad(option) {
    this.type = option.type ? option.type : "";

    setInterval(() => {
      this.flag = this.$u.switchs.check();
    }, 600);

    this.gettabslist();
    this.getbrankdata();
    this.getsellcolumnList();
    this.gettuijian();
    this.getprolist();
    this.getSwiper();
    this.getTuijianServer();
    this.getproandhirelunbo();
  },
  methods: {
    Selectkeyword(e) {},

    tomorebrank(e) {
      uni.$u.route({
        url: "pagesA/screen/screen",
      });
    },

    toproindex(e) {
      uni.$u.route({
        url: "pagesA/screen/screen",
        // params: {

        //   brand_id: e
        // }
      });
    },
    gotoDetail(e) {
      console.log(e);
      if (e) {
        if (e.soure == "product") {
          uni.$u.route({
            url: "pagesA/product/info",
            params: {
              proid: e.id,
            },
          });
        } else if (e.soure == "hire") {
          uni.$u.route({
            url: "pagesA/product/info",
            params: {
              proid: e.id,
            },
          });
        } else {
          let item = {
            serverId: e.id,
          };
          uni.navigateTo({
            url:
              "/pagesB/server/serverDetail?item=" +
              encodeURIComponent(JSON.stringify(item)),
          });
        }
      }
    },
    // 获取品牌
    async getbrankdata() {
      let result = await this.$u.api.product.branklist();
      if (result.code) {
        this.brandlist = result.data;
      }
    },

    async gettuijian() {
      let result = await this.$u.api.product.getsellcolumndata();
      if (result.code) {
        this.list = result.data;
      }
    },

    toinfo(e) {
      uni.$u.route({
        url: "pagesA/product/info",
        params: {
          proid: e,
        },
      });
    },

    // 获取首页商品轮播图
    async getproandhirelunbo() {
      let result = await this.$u.api.hire.picindex();
      if (result.code) {
        this.indexpiclist = result.data;
      }
    },

    async getprolist() {
      let result = await this.$u.api.product.prolist();
      if (result.code) {
        this.prolist = result.data;
      }
    },
    getTuijianServer() {
      uni.request({
        url: uni.getStorageSync("URL") + "home/Carpark/Carpark/getQitaServer",
        method: "POST",
        data: {
          serverid: 0,
        },
        header: {
          "X-Requested-With": "XMLHttpRequest",
        },
        dataType: "json",
        success: (res) => {
          this.flowList = res.data.data;
        },
      });
    },
    goserverDetail(id) {
      let item = {
        serverId: id,
        stoid: 1,
      };

      uni.navigateTo({
        url:
          "/pagesB/server/serverDetail?item=" +
          encodeURIComponent(JSON.stringify(item)),
      });
    },
    swiperOnclick(url) {
      let res = uni.navigateTo({
        url: url,
        fail: () => {
          uni.switchTab({
            url: url,
          });
        },
      });
    },
    getSwiper() {
      uni.request({
        url: uni.getStorageSync("URL") + "home/index/indexpic",
        method: "GET",
        data: {
          name: "首页广告轮播图",
        },
        header: {
          "X-Requested-With": "XMLHttpRequest",
        },
        dataType: "json",
        success: (res) => {
          this.swiperList = res.data.data;
        },
      });
    },
    getServerSwiper() {
      uni.request({
        url: uni.getStorageSync("URL") + "home/carpark/carpark/getServerSwiper",
        method: "POST",
        data: {
          name: "首页服务轮播图",
        },
        header: {
          "X-Requested-With": "XMLHttpRequest",
        },
        dataType: "json",
        success: (res) => {
          this.serverSwiper = res.data.data;
        },
      });
    },
    goSeach() {
      uni.navigateTo({
        url: "/pagesA/productA/productSeach",
      });
    },
    getbrandNamelist() {
      uni.request({
        url: uni.getStorageSync("URL") + "home/product/brank/brankNamelist",
        method: "POST",
        data: {
          name: "首页图标",
        },
        header: {
          "X-Requested-With": "XMLHttpRequest",
        },
        dataType: "json",
        success: (res) => {
          this.brandlist = res.data.data;
        },
      });
    },
    gettabslist() {
      uni.request({
        url: uni.getStorageSync("URL") + "home/product/product/tabslist",
        method: "POST",
        header: {
          "X-Requested-With": "XMLHttpRequest",
        },
        dataType: "json",
        success: (res) => {
          this.list = res.data.data;
        },
      });
    },

    getsellcolumnList() {
      uni.request({
        url: uni.getStorageSync("URL") + "home/product/product/sellcolumnList",
        method: "POST",
        header: {
          "X-Requested-With": "XMLHttpRequest",
        },
        dataType: "json",
        success: (res) => {
          this.sellcolumnList = res.data.data;
        },
      });
    },
    // getcolumnhireList() {
    //   uni.request({
    //     url: uni.getStorageSync("URL") + "home/hire/hire/getcolumnhireList",
    //     method: "POST",
    //     header: {
    //       "X-Requested-With": "XMLHttpRequest",
    //     },
    //     dataType: "json",
    //     success: (res) => {
    //       this.hirelist = res.data.data;
    //     },
    //   });
    // },
    sellcolumnTabschange(index) {
      this.sellcolumnTabscurrent = index;
    },
    sellcolumnTabschange(index) {
      this.sellcolumnTabscurrent = index;
    },
    topTabschange(index) {
      this.topTabscurrent = index;
    },
    upper: function (e) {},
    lower: function (e) {},
    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
  },
};
</script>

<style lang="scss">
.waterfall-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
}

.waterfall-item {
  width: 49%;
  /* 控制每个瀑布流项的宽度 */
  margin-bottom: 20rpx;
  padding: 10rpx;
  background-color: #f5f5f5;

  border: 1px solid #eeeeee;

  box-shadow: 10px 10px 10px #e4e0e0;
  /* 设置阴影效果 */

  border-radius: 10rpx;
  box-sizing: border-box;
}

.watch-image {
  width: 100%;
  height: 350rpx;
  border-radius: 10rpx;
}

.watch-name {
  margin-top: 10rpx;
  font-size: 25rpx;

  color: #333;
}

.watch-price {
  margin-top: 5rpx;
  font-size: 25rpx;
  color: #ff6347;
}

page {
  background-color: #f8f8f8;
}

.brank {
  width: 100%;

  .box {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .item {
      text-align: center;
      margin-top: 15px;
      margin-left: 5px;

      .text {
        font-size: 13px;
        white-space: nowrap; /* 强制文本不换行 */
        overflow: hidden; /* 隐藏超出部分的内容 */
        text-overflow: ellipsis; /* 在文本溢出时显示省略号 */

        margin-top: 5px;
      }

      .morebrank {
        width: 50px;
        height: 50px;
        text-align: center;
        border-radius: 100%;
        .text1 {
          font-size: 13px;
          white-space: nowrap; /* 强制文本不换行 */
          overflow: hidden; /* 隐藏超出部分的内容 */
          text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
        }
        .icon {
          padding: 4px 10px;
          display: block;
        }
      }
    }
  }
}

.thumb {
  margin: 0px 10px;
}
.scroll-Y {
  height: 745px;
}

.warp {
  background: #f8f8f8;

  .search {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90%;

    .store {
      width: 130px;
      padding: 5px;
      .logo {
        width: 100px;
        height: 35px;
        padding-left: 15px;
      }
      h4 {
        width: 85px;
        padding: 15px;
      }
    }
  }

  .topTabs {
    width: 100%;
    background-color: #fff;

    .topTabsitem {
      width: 40%;
    }
  }

  .content {
    height: auto;

    .swiper {
      height: 750rpx;

      .swiper-item {
        display: block;
        height: 750rpx;
        line-height: 750rpx;
        text-align: center;
      }
    }
    .swiper1 {
      height: 750rpx;

      .swiper-item {
        display: block;
        height: 550rpx;
        line-heigt: 550rpx;
        text-align: center;
      }
    }

    .sellcolumn,
    .hireSellcolumn {
      width: 95%;
      margin: 15rpx auto;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 5rpx;

      .column-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .column-content {
        margin-top: 10rpx;
        margin-bottom: 10rpx;

        .scroll-view_H {
          white-space: nowrap;
          width: 100%;

          .scroll-view-item_H {
            display: inline-block;
            width: 31%;
            text-align: center;
            margin-left: 20rpx;
            border: 1rpx solid #f2f2f2;
            border-radius: 20rpx;

            .content-img {
              width: 96%;
              height: 210rpx;

              image {
                width: 100%;
                height: 100%;
                object-fit: contain;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
                border-bottom: 1px solid #fff;
              }
            }

            .content-text {
              text-align: center;
              background-color: #d4237a;
              color: white;
            }

            .content-text-x {
              text-align: center;
              background-color: #7f7f7f;
              color: white;
            }

            .content-name {
              font-size: 30rpx;
              color: black;
              margin: 10rpx 0 0 0rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              text-align: left;
              white-space: nowrap;
            }

            .content-price {
              font-size: 30rpx;
              color: orange;

              margin: 10rpx 10px 10px 10rpx;
              text-align: left;
            }
          }
        }

        .columncontent {
        }
      }
    }

    .type {
      padding: 10rpx;
      width: 95%;
      margin: 10rpx auto;
      background-color: #fff;
      border-radius: 20rpx;

      .type-top {
        width: 100%;
        margin-top: 15rpx;
        display: flex;
        justify-content: space-around;

        .top-list {
          width: 15%;
          height: 100rpx;
          margin-top: 15rpx;

          .brandname {
            font-size: 28rpx;
            text-align: center;
          }
        }
      }

      .cart_box {
        margin-top: 15rpx;
        margin-bottom: 10rpx;
        display: flex;
        justify-content: space-around;

        .cart-item {
          height: 70rpx;
          line-height: 70rpx;
          width: 120rpx;
          font-size: 26rpx;
          background-color: #f5f6f7;
          padding: 5rpx;
          color: #313038;
          text-align: center;
        }
      }
    }

    .place {
      font-size: 19px;
      padding: 10px;
    }

    .goods-list {
      margin-top: 15px;
      padding-top: 10px;

      .loading-text {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
        color: #979797;
        font-size: 12px;
      }

      .product-list {
        width: 100%;
        padding-left: 8px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .product {
          padding-bottom: 5px;
          width: 45%;
          border-radius: 10px;
          text-align: center;
          background-color: #fff;
          margin: 10px 5px;
          box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);

          image {
            width: 100%;
            border-radius: 10px 10px 0 0;
          }

          .name {
            width: 95%;
            padding: 5px 4%;
            display: -webkit-box;
            flex-wrap: wrap;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-align: justify;

            overflow: hidden;
            font-size: 13px;
          }

          .info {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            width: 92%;
            padding: 5px 4% 5px 4%;

            .price {
              color: #e65339;
              font-size: 15px;
              font-weight: 600;
            }

            .slogan {
              color: #807c87;
              font-size: 12px;
              margin-left: 6px;
            }
          }
        }
      }
    }
  }
}
</style>
